<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Microsoft FHIR Server SMART on FHIR App Launcher</title>
    
 </head>
<body>
<div class="container">
    <h1>Microsoft FHIR Server SMART on FHIR App Launcher</h1>
    <div class="row">
        <h2>Launch parameters</h2>
        <div class="form-group col-xs-8">
            <label for="patient">Patient:</label>
            <input type="text" id="patient" class="form-control" />
            <label for="encounter">Encounter:</label>
            <input type="text" id="encounter" class="form-control" />
            <label for="practitioner">Practitioner:</label>
            <input type="text" id="practitioner" class="form-control" />
            <label for="appurl">Appliction URL:</label>
            <input type="text" id="appurl" class="form-control" />
            <label for="fhirurl">FHIR Server URL:</label>
            <input type="text" id="fhirurl" class="form-control" />
        </div>
    </div>
    <div class="row">
        <h2>Launch context</h2>
        <div class="form-group col-xs-8">
            <textarea class="form-control" rows="5" id="launchContext" readonly>
                
            </textarea>
        </div>
    </div>

    <div class="row">
            <h2>Launch URL</h2>
            <div class="form-group col-xs-8">
                <input type=text class="form-control disabled" id="launchUrl" readonly />
                <button id="launchButton" style="margin-top: 5px;" class="btn btn-success" onclick="window.open($('#launchUrl').val(),'_blank')">Launch</button>
            </div>
    </div>
</div>

<script>
    function updateLaunchQuery()
    {
        var launchContext = {};

        if ($('#patient').val().length)
        {
            launchContext.patient = $('#patient').val();
        }

        if ($('#encounter').val().length)
        {
            launchContext.encounter = $('#encounter').val();
        }

        if ($('#practitioner').val().length)
        {
            launchContext.practioner = $('#practitioner').val();
        }

        var queryString = 'launch=' + encodeURIComponent(btoa(JSON.stringify(launchContext)));

        if ($('#fhirurl').val().length)
        {
            queryString += '&iss=' + encodeURIComponent($('#fhirurl').val());
        }

        $('#launchContext').val(JSON.stringify(launchContext, undefined, 2));
        
        $('#launchUrl').val($('#appurl').val() + '?' + queryString);

    }


    $('#patient').on('input', updateLaunchQuery);
    $('#encounter').on('input', updateLaunchQuery);
    $('#practitioner').on('input', updateLaunchQuery);
    $('#appurl').on('input', updateLaunchQuery);
    $('#fhirurl').on('input', updateLaunchQuery);


    $.getJSON( '/config', function (appConfig) {
        $('#appurl').val(appConfig.DefaultSmartAppUrl);
        $('#fhirurl').val(appConfig.FhirServerUrl);
        updateLaunchQuery();
    });

</script>
 
</body> 
</html>